<template>
  <div id="anchorPointContainer"></div>
  <!-- <canvas id="canvas1" width="200" height="200"></canvas> -->
  <!-- <svg width="500" height="500">
    <path d="M 100, 100 A 50, 50, 0, 0, 1, 50, 150 L 50, 100 Z" transform="rotate(45, 100, 100)"></path>
  </svg> -->
</template>

<script setup>
import { Graph, registerNode } from "@antv/g6";
import { onMounted } from "vue";
import { ext } from "@antv/matrix-util";
const transform = ext.transform;

onMounted(() => {
  registerNode(
    "key-node",
    {
      draw(cfg, group) {
        const radius = cfg.size / 2;
        if (cfg.children) {
          let pieRadius = radius + 40;
          const inAngle = (120 / 360) * Math.PI * 2;
          const inArcEnd = [
            pieRadius * Math.cos(inAngle),
            -pieRadius * Math.sin(inAngle),
          ];
          const path0 = group.addShape("path", {
            attrs: {
              path: [
                ["M", pieRadius, 0],
                ["A", pieRadius, pieRadius, 0, 0, 0, inArcEnd[0], inArcEnd[1]],
                ["L", 0, 0],
                ["Z"],
              ],
              opacity: 0,
              cursor: "pointer",
              fill: cfg.children[0].fill,
            },
            name: "key-path0",
            draggable: true,
          });
          const path1 = group.addShape("path", {
            attrs: {
              path: [
                ["M", pieRadius, 0],
                ["A", pieRadius, pieRadius, 0, 0, 0, inArcEnd[0], inArcEnd[1]],
                ["L", 0, 0],
                ["Z"],
              ],
              opacity: 0,
              cursor: "pointer",
              fill: cfg.children[1].fill,
            },
            name: "key-path1",
            draggable: true,
          });
          const path2 = group.addShape("path", {
            attrs: {
              path: [
                ["M", pieRadius, 0],
                ["A", pieRadius, pieRadius, 0, 0, 0, inArcEnd[0], inArcEnd[1]],
                ["L", 0, 0],
                ["Z"],
              ],
              fill: cfg.children[2].fill,
              cursor: "pointer",
              opacity: 0,
            },
            name: "key-path2",
            draggable: true,
          });
          let matrix = path0.getMatrix();
          // 图形或分组的初始矩阵时 null，为了避免变换一个 null 矩阵，需要将其初始化为单位矩阵
          if (!matrix) matrix = [1, 0, 0, 0, 1, 0, 0, 0, 1];

          // 3*3 矩阵变换，用于二维渲染
          const newMatrix1 = transform(matrix, [
            ["r", (-Math.PI * 2) / 3], // rotate
          ]);
          const newMatrix2 = transform(matrix, [
            ["r", (Math.PI * 2) / 3], // rotate
          ]);
          path1.setMatrix(newMatrix1);
          path2.setMatrix(newMatrix2);
        }
        let keyShape = group.addShape("circle", {
          attrs: {
            ...cfg.style,
            r: radius,
          },
          draggable: true,
          name: "key-circle",
        });
        if (cfg.label) {
          const label = group.addShape("text", {
            attrs: {
              textAlign: "center",
              textBaseline: "middle",
              text: cfg.label,
              ...cfg.labelCfg.style,
            },
            name: "key-label",
            draggable: true,
          });
        }
        return keyShape;
      },
      setState(name, value, item) {
        const group = item.getContainer();
        const path0 = group.get("children")[0];
        const path1 = group.get("children")[1];
        const path2 = group.get("children")[2];
        if (name === "hover") {
          if (value) {
            if (item.name === "key-circle" || item.name === "key-label") {
              path0.attr("opacity", 1);
              path1.attr("opacity", 1);
              path2.attr("opacity", 1);
            }
          } 
        //   else {
        //     path0.attr("opacity", 0);
        //     path1.attr("opacity", 0);
        //     path2.attr("opacity", 0);
        //   }
        }
      },
    },
    "single-node"
  );
  const data = {
    nodes: [
      {
        id: "key-node",
        type: "key-node",
        label: "疾病",
        size: 80,
        style: {
          fill: "green",
        },
        children: [
          {
            label: "中药",
            fill: "red",
          },
          {
            label: "方剂",
            fill: "pink",
          },
          {
            label: "文献",
            fill: "yellow",
          },
        ],
        labelCfg: {
          style: {
            fill: "white",
            fontSize: 20,
          },
        },
      },
    ],
    edges: [],
  };
  const graph = new Graph({
    container: "anchorPointContainer",
    width: 800,
    height: 300,
    fitCenter: true,
    modes: {
      default: ["drag-node", "zoom-canvas", "drag-canvas"],
    },
    layout: {
      type: "force",
      linkDistance: 100,
      preventOverlap: true,
      nodeSpacing: 100,
    },
  });
  graph.on("node:mouseover", (e) => {
    const node = e.item;
    node.name = e.shape?.cfg?.name;
    graph.setItemState(node, "hover", true);
  });
  graph.on("node:mouseout", (e) => {
    const node = e.item;
    node.name = e.shape?.cfg?.name;
    graph.setItemState(node, "hover", false);
  });

  graph.read(data);

  //   const canvas1 = document.getElementById('canvas1')
  //   const ctx = canvas1.getContext('2d')
  //   ctx.beginPath()
  //   ctx.moveTo(100, 100)
  //   ctx.arc(100, 100, 50, Math.PI  * 0 / 3, Math.PI  * 2 / 3)
  //   ctx.fill()
  //   ctx.beginPath()
  //   ctx.moveTo(100, 100)
  //   ctx.arc(100, 100, 50, Math.PI  * 2 / 3, Math.PI  * 4 / 3)
  //   ctx.fillStyle = 'red'
  //   ctx.fill()
  //   ctx.beginPath()
  //   ctx.moveTo(100, 100)
  //   ctx.arc(100, 100, 50, Math.PI  * 4 / 3, Math.PI * 6 / 3)
  //   ctx.fillStyle = 'green'
  //   ctx.fill()
  //   ctx.beginPath()
  //   ctx.arc(100, 100, 30, 0, Math.PI  * 2)
  //   ctx.fillStyle = 'pink'
  //   ctx.fill()
});
</script>

<style lang="less"></style>
